<template>
<div class="searchTables" style="display: flex; width: 30%; margin-bottom: 10px;">
    <a-input-search v-model:value="inputValue" placeholder="输入产品名" enter-button="搜索" size="large" @search="onSearch" />
</div>
<a-modal v-model:visible="visible" title="新增产品" ok-text="确认" cancel-text="取消" @ok="hideModal">
    <a-form :model="formState">
        <a-form-item label="位置" :rules="[{ required: true, message: '请输入位置!' }]">
            <a-input v-model:value="formState.address" />
        </a-form-item>
    </a-form>
</a-modal>
<div class="table">
    <a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'pName'">
                <span>
                    <smile-outlined />
                    产品名
                </span>
            </template>
        </template>

        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'pName'">
                <router-link :to="'/productDetails/'+record.puid">
                    {{ record.pname }}
                </router-link>
            </template>
            <template v-else-if="column.key === 'type'">
                <span>
                    <a-tag :key="record.type" :color=" 'cyan' ">
                        {{ record.type }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'arrived'">
                <span>
                    <a-tag :key="record.arrived" :color="record.arrived=='1' ? 'blue' :'red'">
                        {{ record.arrived == "1" ? "已到达" : "未到达" }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'action'">
                <span>
                    <a-button type="primary" @click="showModal(record)">设置下级位置</a-button>
                    <a-divider type="vertical" />
                    <a-button type="primary" style="background-color:coral;border-color: coral;" @click="updateStatus(record)">修改到达状态</a-button>
                </span>
            </template>
        </template>
    </a-table>
</div>
</template>

    
<script>
import {
    SmileOutlined,
    DownOutlined,
} from '@ant-design/icons-vue';
import {
    message
} from 'ant-design-vue';
import saveImag from '@/utils/DownloadImg'
import API from '@/config/axiosInstance'
import {
    defineComponent,
    ref,
} from 'vue';
const data = ref([{
    puid: '',
    pname: '',
    type: "",
    address: '',
    source: '',
    lot: '',
    exp: '',
    arrived:''
}]);
export default defineComponent({
    inject: ["reload"],
    components: {
        SmileOutlined,
        DownOutlined,
    },
    setup() {
        const formState = ref({
            puid: '',
            address: '',
        })
        const columns = ref([{
                dataIndex: '产品名',
                key: 'pName',
                resizable: true,
                width: 200,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '批号',
                dataIndex: 'lot',
                key: 'lot',
            },
            {
                title: '类型',
                dataIndex: 'type',
                key: 'type',
                resizable: true,
                width: 100,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '产地',
                dataIndex: 'source',
                key: 'source',
            },
            {
                title: '位置',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '是否到达',
                dataIndex: 'arrived',
                key: 'arrived',
            },
            {
                title: '到期时间',
                dataIndex: 'exp',
                key: 'exp',
                defaultSortOrder: 'descend',
                sorter: (a, b) => {
                    const aTime = new Date(a.exp).getTime(); // 需要先转换成时间戳
                    const bTime = new Date(b.exp).getTime();
                    return aTime - bTime;
                },
            },
            {
                title: '操作',
                key: 'action',
            }
        ]);
        const visible = ref(false);
        const handleCancel = () => {
            visible = false;
        };
        return {
            data,
            handleCancel,
            visible,
            columns,
            formState,
            inputValue: ref(""),
            handleResizeColumn: (w, col) => {
                col.width = w;
            },
        };

    },
    methods: {
        showModal(record) {
            this.visible = true
            this.formState = record
            this.formState.createTime = null
        },
        hideModal(){
            if(this.formState.address == "" || this.formState.address==null){
                message.error("请输入位置！")
            }else{
                console.log(this.formState)
                this.updateData()
                this.visible = false
            }
        },
        onSearch() {
            this.getData();
        },
        updateData() {
            API({
                method: 'post',
                url: 'product/updatePosition',
                params: this.formState
            }).then(res => {
                message.info(res.data.msg)
                this.reload();
            })
        },
        updateStatus(record) {
            API({
                method: 'post',
                url: 'history/updateArrived',
                params: {
                    'puid':record.puid,
                    'address':record.address,
                    'arrived':record.arrived == '0' ? '1' : '0'
                }
            }).then(res => {
                message.info(res.data.msg)
                this.reload();
            })
        },
        addData() {
            API({
                method: 'post',
                url: 'product/add',
                params: this.formState
            }).then(res => {
                message.info(res.data.msg)
                this.reload();
            })
        },
        getList() {
            API({
                method: 'get',
                url: 'product/lists'
            }).then(res => {
                console.log(res.data.info)
                this.data = res.data.info
            })
        },
        getData() {
            API({
                method: 'get',
                url: 'product/getData',
                params: {
                    'pName': this.inputValue
                }
            }).then(res => {
                if (res.data.resCode == '200') {
                    message.success('成功')
                    this.data = res.data.info
                }
            })
        }
    },
    created() {
        this.getList();
    }
});
</script>
